//填写信息
'use strict';
import React,{Component} from 'react';
import Header from '../common/header';
import styles from '../style/styles';
import Icon from 'react-native-vector-icons';
import * as URLconstant from '../constant/URLconstant';
import Util from '../common/util'
import StringUtil from '../common/StringUtil'
import Toast from '../common/ToastUtil'
import MyStroage from '../common/myStroage';
import FIcon from 'react-native-vector-icons';
import LinearGradient from 'react-native-linear-gradient'
import {
    Text,
    View,
    TextInput,
    TouchableOpacity,
    Image
} from 'react-native';
export default class register extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态

          //this.codeRequest=this.codeRequest.bind(this)
          this.successPost=this.successPost.bind(this)
          this.errorPost=this.errorPost.bind(this)
          this.codeRequest=this.codeRequest.bind(this)
          this.tick = this.tick.bind(this);
        this.state = {
            code:'',
            password:'',
            confirmPassword:'',
            secureConfirmPassword:true,
            phone_mob:this.props.phone_mob,
            secondsElapsed: 120,
            securePassword: true,
        };
      }

    componentDidMount() {
        this.tick()
    }
    //关闭定时器
    componentWillUnmount() {
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearTimeout(this.timer);
    }

//获取验证码
    codeRequest() {
        let that = this;
        let url=URLconstant.VERIFICATION_URL;
        let tel=this.state.phone_mob
        let datakey=[];
        datakey['phone_mob']=tel;
        Util.post(url, datakey, function (datas) {
            //LOG('验证码======' + JSON.stringify(datas));
            if (datas['status'] == 0) {
                Toast.show(datas['msg']);
                that.setState({
                    secondsElapsed: 120,
                });
                that.tick();
            } else {
                Toast.show(datas['msg']);
            }

        }, this.errorcallback);
    }

    errorcallback(err){

    }


    //验证码计时器的处理方法
    tick() {
        var secondsElapsed = this.state.secondsElapsed - 1;
        if (secondsElapsed == 0) {
            this.setState({secondsElapsed: 0});
            return;
        }
        this.timer = setTimeout(()=> {
            this.setState({secondsElapsed: secondsElapsed});
            this.tick();
        }, 1000);
    }

    registerPost(){
        let that =this;
        let phone_mob=this.state.phone_mob
        let code = that.state.code;
        let password = that.state.password;
        let confirmPassword = that.state.confirmPassword;
        if(password==confirmPassword){
            if(!StringUtil.isCode(code)&&!StringUtil.ispassword(password)){
                let url=URLconstant.REGISTER_URL;
                let datakey=[];
                datakey['phone_mob']=phone_mob;
                datakey['verify']=code;
                datakey['password']=password;
                Util.post(url,datakey,this.successPost,this.errorPost)

            }
        }else {
            Toast.show('请确认两次密码是否相同!')
        }
    }

    successPost(datas){
        //LOG(JSON.stringify(datas))
        if(datas.status==0){
            Toast.show(datas.msg)
            let userData = datas['data']
            this.props.navigator.popToTop();
        }else {
            Toast.show(datas.msg)
        }
    }


    errorPost(err){
        LOG(err)
    }

    confirmBtn(){
        let that =this;
        let code = that.state.code;
        let password = that.state.password;
        let confirmPassword = that.state.confirmPassword;
        if(code!==''&&password!=''&&confirmPassword!=''){
            return(
                <TouchableOpacity style={styles.login_btn} onPress={()=>this.registerPost()}>
                    <Text style={styles.login_btn_txt}>完成</Text>
                </TouchableOpacity>
            )
        }else{
            return(
                <View style={styles.no_login_btn}>
                    <Text style={styles.login_no_txt}>完成</Text>
                </View>
            )
        }
    }

    eye(){
        let that =this;
        let secureTextEntry= that.state.securePassword;
        if(secureTextEntry==true){
            return(
                <Icon name={'eye-slash'} size={15} color={'#fff'}/>
            )
        }else{
            return(
                <Icon name={'eye'} size={15} color={'#fff'}/>
            )
        }
    }
    eye2(){
        let that =this;
        let secureTextEntry= that.state.secureConfirmPassword;
        if(secureTextEntry==true){
            return(
                <Icon name={'eye-slash'} size={15} color={'#fff'}/>
            )
        }else{
            return(
                <Icon name={'eye'} size={15} color={'#fff'}/>
            )
        }
    }
    _pop() {
        let that = this;
        that.props.navigator.pop();
    }

    render(){
        var getCode_text = this.state.secondsElapsed == 0 ? '获取验证码' : (this.state.secondsElapsed + '秒后重试');
        return(
            <View style={{flex:1}}>
                <LinearGradient
                    colors={['#5886ff', '#329cfa']}
                    start={{x: 0, y: 0}}
                    end={{x: 1, y: 1}}
                    locations={[0, 0.75]}
                >
                    <View style={styles.login_wrap}>
                        <View style={{height:90,justifyContent:'center',alignItems:'center',marginTop:60}}>
                            <Text style={{fontSize:36,color:'#fff'}}>填写密码</Text>
                        </View>
                        <View style={styles.login_list}>
                            <View style={styles.login_tip}>
                                <Text style={{color:'#fff'}}>验证码</Text>
                            </View>
                            <TextInput
                                style={styles.login_input}
                                placeholder={'6位数验证码'}
                                maxLength={6}
                                placeholderTextColor={'#fff'}
                                clearButtonMode={'while-editing'}
                                onChangeText={(text)=>this.setState({code:text})}
                                underlineColorAndroid={'transparent'}
                                keyboardType={'numeric'}
                            />
                            {this.state.secondsElapsed == 0 ?
                                <TouchableOpacity style={styles.reget} onPress={()=>this.codeRequest()}>
                                    <Text style={styles.reget_txt}>{getCode_text}</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity style={styles.reget}>
                                    <Text style={styles.reget_txt}>{getCode_text}</Text>
                                </TouchableOpacity>
                            }

                        </View>
                        <View style={styles.login_list}>
                            <Image
                                resizeMode="cover"
                                style={{height:35,width:35,marginLeft:5,marginRight:10}}
                                source={require('../imgs/registerclose.png')}/>
                            <TextInput
                                style={styles.login_input}
                                placeholder={'请输入密码'}
                                placeholderTextColor={'#fff'}
                                clearButtonMode={'while-editing'}
                                secureTextEntry={this.state.securePassword}
                                onChangeText={(text)=>this.setState({password:text})}
                                underlineColorAndroid={'transparent'}
                            />
                            <TouchableOpacity style={styles.hide_password} onPress={()=>this.setState({securePassword:!this.state.securePassword})}>
                                {this.eye()}
                            </TouchableOpacity>
                        </View>
                        <View style={styles.login_list}>
                            <Image
                                resizeMode="cover"
                                style={{height:35,width:35,marginLeft:5,marginRight:10}}
                                source={require('../imgs/registerclose.png')}/>
                            <TextInput
                                style={styles.login_input}
                                placeholder={'请输入密码'}
                                placeholderTextColor={'#fff'}
                                clearButtonMode={'while-editing'}
                                secureTextEntry={this.state.secureConfirmPassword}
                                onChangeText={(text)=>this.setState({confirmPassword:text})}
                                underlineColorAndroid={'transparent'}
                            />
                            <TouchableOpacity style={styles.hide_password} onPress={()=>this.setState({secureConfirmPassword:!this.state.secureConfirmPassword})}>
                                {this.eye2()}
                            </TouchableOpacity>
                        </View>
                        <View style={{height:65}}>
                            {this.confirmBtn()}
                        </View>
                    </View>
                </LinearGradient>
                <TouchableOpacity style={{height:40,position:'absolute',top:40,left:20}} onPress={()=>this._pop()}>
                    <FIcon name={'ios-arrow-back'} size={30} color="#fff"/>
                </TouchableOpacity>
            </View>
        )
    }
}